 <template>
  <div class="LoginCodeCompBox">
    <div class="InputCompBox">
      <span class="label">账号：</span>
      <input
        v-model="userNameRef"
        type="text"
        placeholder="请输入邮箱/手机号码"
        :class="{
          default: userNameErrorMessage ? false : true,
          error: userNameErrorMessage ? true : false,
          dark_input: theme.state.themeState == 'drak',
          light_input: theme.state.themeState == 'light',
        }"
        @blur="userNameBlurFn"
      />
      <transition name="el-zoom-in-center">
        <p>{{ userNameErrorMessage }}</p>
      </transition>
    </div>
    <div class="InputCompBox">
      <span style="float: left; line-height: 35px">验证码：</span>
      <button :class="{ btnClick: buttonStateRef == 1 }" @click="getPhoneCode">
        {{ !buttonStateRef ? "获取验证码" : showInfoRef + "s重新发送" }}
      </button>
      <input
        type="text"
        placeholder="请输入验证码"
        class="checkCode"
        :class="{
          default: codeErrorMessage ? false : true,
          error: codeErrorMessage ? true : false,
          dark_input: theme.state.themeState == 'drak',
          light_input: theme.state.themeState == 'light',
        }"
        v-model="codeRef"
        @blur="codeBlurFn"
      />

      <transition name="el-zoom-in-center">
        <p>{{ codeErrorMessage }}</p>
      </transition>
    </div>
    <button class="codeLogin" @click="loginUp">登录</button>
    <button class="codeReset" @click="resets">重置</button>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
import ins from "@/utils/Axios.ts";
import { ElMessage } from "element-plus";
@Options({})
export default class HelloWorld extends Vue {
  theme: any = useStore();
  /**
   * *********************处理输入框数据************************
   */
  userNameRef: String = "";
  codeRef: String = "";
  userNameErrorMessage: String = "";
  codeErrorMessage: String = "";
  isEmail: Boolean = true;
  isOkGetCode: Boolean = false;
  isOkUserName: Boolean = false;
  //失焦判断格式
  userNameBlurFn() {
    let PhoneRule =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    let EmailRule =
      /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    if (!this.userNameRef) {
      this.userNameErrorMessage = "账号不允许为空！";
      this.isOkUserName = false;
      throw new Error("账号不允许为空！");
    }
    if (!EmailRule.test("" + this.userNameRef)) {
      this.isEmail = false;
    } else {
      this.isEmail = true;
    }
    if (
      !this.isEmail &&
      this.userNameRef.length != 11 &&
      !PhoneRule.test("" + this.userNameRef)
    ) {
      this.userNameErrorMessage = "抱歉您的手机号码/邮箱格式出错！";
      this.isOkUserName = false;
      throw new Error("抱歉您的手机号码格式出错！");
    }

    this.userNameErrorMessage = "";
    this.isOkUserName = true;
  }
  codeBlurFn() {
    if (!this.codeRef) {
      this.codeErrorMessage = "验证码不允许为空！";
      throw new Error("验证码不允许为空！");
    } else {
      this.codeErrorMessage = "";
      this.isOkGetCode = true;
    }
  }
  /**
   * *********************获取验证码按钮相关（只在checkCode类型下生效）************************
   */
  // 按钮状态
  buttonStateRef = 0;
  // 按钮数字
  showInfoRef = 0;
  // 获取验证码
  getPhoneCode() {
    if (this.isOkUserName) {
      // 发送请求
      ins
        .post(this.isEmail ? "/other/getEmailCode" : "/other/getPhoneCode", {
          userName: this.userNameRef,
        })
        .catch((err: any) => {
          ElMessage.error("网络超时，请刷新后重试！");
        });

      if (this.buttonStateRef == 1) {
        return;
      }
      this.buttonStateRef = 1;
      this.showInfoRef = 10;
      let timer = setInterval(() => {
        this.showInfoRef--;
        if (this.showInfoRef <= 1) {
          this.buttonStateRef = 0;
          clearInterval(timer);
        }
      }, 1000);
    } else {
      ElMessage.error("错误，发生未知错误.");
      return;
    }
  }

  /**
   * ******************登录*******************
   */
  loginUp() {
    if (this.isOkGetCode && this.isOkUserName) {
      ins
        .post("/user/phoneCodeLogin", {
          userName: this.userNameRef,
          code: this.codeRef,
        })
        .then((res: any) => {
          console.log(this.theme);
          //   this.isOkUserName = false;
          if (!res.data.flag) {
            ElMessage.error(res.data.msg);
            this.codeRef = "";
            this.isOkGetCode = false;
          } else {
            //后续操作
            localStorage.setItem("userID", res.data.userID);
            //登录时间
            localStorage.setItem("timer", "" + +new Date());
            location.reload();
          }
        })
        .catch((err: any) => {
          ElMessage.error("网络超时，请刷新后重试！");
        });
    } else {
      ElMessage.error("错误，无效的请求目标.");
    }
  }

  /**
   * 重置
   */
  resets() {
    this.userNameRef = "";
    this.codeRef = "";
    this.codeErrorMessage = "";
    this.userNameErrorMessage = "";
    this.isOkGetCode = false;
    this.isOkUserName = false;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../../assets/less/global.less");
.LoginCodeCompBox {
}
.InputCompBox {
  width: 100%;
  box-sizing: border-box;
  background-color: initial;
  font-size: 14px;
  margin: 0 !important;
  overflow: hidden;
  height: 75px;
  padding-top: 5px;
  padding-right: 2px;

  .label {
    width: 20%;
    text-align: left;
    background-color: initial;
    float: left;
    height: 35px;
    line-height: 35px;
  }

  input {
    width: 75%;
    height: 35px;
    border-radius: 3px;
    outline: none;
    padding-left: 10px;
    float: right;
    box-sizing: border-box;
    // overflow: hidden;
  }

  .error {
    border: 1px solid rgb(231, 21, 21);
    box-shadow: 0 0 2px 0.5px rgb(230, 101, 101);
  }

  p {
    overflow: hidden;
    width: 70%;
    color: rgb(238, 76, 76);
    text-align: left;
    margin-left: 25%;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .checkCode {
    float: right;
    width: 45% !important;
    margin-right: 3%;
  }

  button {
    width: 85px;
    float: right;
    height: 35px;
    cursor: pointer;
    background-color: @theme-color;
    border-radius: 5px;
    border: none;
    color: #fff;
  }

  .btnClick {
    cursor: wait;
    position: relative;

    &::after {
      content: "";
      border-radius: 5px;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      top: 0;
      left: 0;
    }
  }
}
.codeLogin,
.codeReset {
  width: 35%;
  height: 40px;
  cursor: pointer;
  color: aliceblue;
  border-radius: 5px;
  border: none;
  margin-top: 20px;
}

.codeLogin {
  background-color: @theme-color;
  float: left;
  margin-left: 20px;
}

.codeReset {
  background-color: aliceblue;
  color: #000;
  float: right;
  margin-right: 20px;
}
</style>

 
